import { useState, useEffect, useMemo } from 'react'
import { View, Text, Image, RichText } from '@tarojs/components'
import { connect, useSelector } from 'react-redux'
import Util from '../../../../utils/index'

import Taro from '@tarojs/taro'
import './index.scss'

function CardA(props) {

    let {
        title,
        content,
        startTime,
        endTime,
        toDetail,
        status,
        publisher,
    } = props

    const [showCutdown, setShowCutdown] = useState(true)

    // 倒计时结束
    const handleEnd = () => {
        setShowCutdown(false)
    }
    return (
        <View className='card_container_A' onClick={toDetail}>
            <View className={
                title.indexOf('一网通办') > -1 ?
                    'todo_icon todo-type1' :
                    title.indexOf('信息采集') > -1 ?
                        'todo_icon  todo-type4' :
                        title.indexOf('投票') > -1 ?
                            'todo_icon todo-type2' :
                            title.indexOf('会议邀请') > -1 ?
                                'todo_icon todo-type1' :
                                title.indexOf('预习') > -1 ?
                                    'todo_icon brforeclass' :
                                    'todo_icon todo-type0'
            }></View>
            <View className='todo_body'>
                <View className="title_box">
                    <View className='title' style={{ color: `${status != 0 ? '#6666' : ''}` }}>{title}</View>
                    <View className="dead_time" style={{ display: Util.getTimeDiff(endTime, "") == 0 ? 'none' : '' }}>{Util.getTimeDiff(endTime, "") + '截止'}</View>
                </View>
                <View className='content' style={{ color: `${status != 0 ? '#6666' : ''}` }}>{content.replace(/>>/, '')}<Text style={{ fontFamily: '宋体' }}>{'>>'}</Text></View>
                <View className='time'>
                    <View>{publisher}</View>
                    <View className='line'></View>
                    <View>{startTime}</View>
                </View>
            </View>
        </View>
    );
}


function CardB(props) {

    const {
        title,
        content,
        time,
        isRead,
        publisher,
        noticeType,
        toLink,
    } = props

    return (
        <View className='card_container_B' onClick={toLink}>
            <View className='todo_icon' style={{ backgroundColor: `${isRead ? '#ccc' : '#f64545'}` }}></View>
            <View className='todo_body'>
                <View className='title'>
                    <Text className='urgent_txt' style={noticeType == 1 ? '' : { display: 'none' }}>[紧急]</Text>
                    <Text className={isRead ? 'title already_read' : 'title'}>{title}</Text>
                </View>
                <View className='content'>
                    <RichText style={{ color: isRead ? '#999999' : '' }} nodes={content} />
                </View>
                <View className='footer'>
                    <Text className='publisher'>{publisher}</Text>
                    <View className='line'></View>
                    <Text className='time'>{time}</Text>
                    <View className='line'></View>
                    <Text
                        className={isRead ? 'already_read' : 'no_read'}
                    >{isRead ? '已读' : '未读'}</Text>
                </View>
            </View>
        </View>
    );
}

function CardC(props) {

    let {
        content,
        time,
        sourceName,
        toLink,
        id,
        status,
        pressId,
    } = props

    // console.log(props);
    if (content) {
        content = content.replace('<p>', '').replace('</p>', '')
    }


    return (
        <View
            className='card_container_C'
            onClick={toLink}
        >
            <View className='main_body'>
                <View className="title" style={{ color: `${status == 1 ? '#6666' : ''}` }}>{content}</View>
                <View className='footer'>
                    <Text className='content'>{sourceName}</Text>
                    <View className='line'></View>
                    <Text className='time'>{time}</Text>
                </View>
            </View>
        </View>
    );
}

function getHtmlChat(htmlString) {
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlString;
    var text = tempDiv.textContent;
    return text.trim()
}

function CardD(props) {


    const {
        UserID
    }=useSelector(({commonData})=>commonData.userInfo)
    const {
        senderName,
        senderPhoto,
        msgContent='',
        onClick,
        msgType,
        groupName,
        unreadMsgCount,
        isShield,
        id,
        time,
        NewestMsgIsRevoke,
        NewestMsgSenderID,
        pressId,
        isLongPress,
        onTouchStart,
        onTouchEnd,
        isNodisturb,
        mainServer
    } = props

    const contentBox = useMemo(() => {
        let dom: any = ''
        if(NewestMsgIsRevoke==1){
            if(NewestMsgSenderID==UserID){
                dom=<View className='content'>你撤回了一条消息</View>
            }else{
                dom=<View className='content'>对方撤回了一条消息</View>
            }
        }else{
            switch (msgType) {
                case 1:
                    dom = <View className='content'>{decodeURIComponent(msgContent)}</View>
                    break;
                case 2:
                    dom = <View className='content'>{'[图片]'}</View>
                    break;
                case 5:
                    dom = <View className='content'>{'[文件]'}</View>
                    break;
                default:
                    dom=<View className='content'>{getHtmlChat(decodeURIComponent(msgContent))}</View>
                    break;
            }
        }
        return dom
    }, [msgContent,msgType,NewestMsgIsRevoke])

    return (
        <View
            className={`${id === pressId && isLongPress ? 'pressed' : ''} card_container_D`}
            onTouchStart={onTouchStart}
            onTouchEnd={onTouchEnd}
            onClick={onClick}
        >
            <View className='cardbody'>
                <View className='avatar' style={senderPhoto ? { backgroundImage: `url(${senderPhoto})` } : ''}></View>
                <View className='name'>{senderName}</View>
                <View>
                    {contentBox}
                </View>
                <View className='right_sign'>
                    {
                        isShield ?
                            <View className='shield'></View> : ''
                    }
                    {
                        isNodisturb && !isShield ?
                            <View className='nodisturb'></View> : ''
                    }
                    {
                        isNodisturb && unreadMsgCount > 0 && !isShield ?
                            <View className='news_point'></View> : ''
                    }
                    {
                        unreadMsgCount > 0 && !isShield && !isNodisturb ?
                            <View className='mes_count'>{unreadMsgCount}</View> : ''
                    }
                </View>
                <View className='time'>{time}</View>
            </View>
            {/* <View
                className={id === pressId && isLongPress ? 'bubble' : 'bubble none'}
            >
                <Text className='text del font_header' onClick={() => { toDelete() }} >删除</Text>
                {
                    msgType == 1 ?
                        <Text className='text shield font_header' onClick={shieldHandle} >{isShield ? '取消屏蔽' : '屏蔽此人'}</Text> : ''
                }
                {
                    !isShield ?
                        <Text className='text nodisturb font_header' onClick={noDisturbHandle} >{isNodisturb ? '消息提醒' : '消息免打扰'}</Text> : ''
                }
            </View> */}
        </View>
    )
}



function App(props) {
    let {
        type
    } = props

    if (type === 'A') {
        return <CardA {...props} />
    } else if (type === 'B') {
        return <CardB {...props} />
    } else if (type === 'C') {
        return <CardC {...props} />
    } else if (type === 'D') {
        return <CardD {...props} />
    } else {
        return <CardA {...props} />
    }
}

const mainProps = ({ commonData }) => {
    return {
        mainServer: commonData.mainServer
    }

}

export default connect(mainProps)(App)
